<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP滚动淡入淡出效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        
        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            margin-bottom: 50px;
        }
        
        .fade-box {
            width: 200px;
            height: 200px;
            background-color: #4a90e2;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            opacity: 0; /* 初始设置为透明 */
        }
        
        .content {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="content">
        <section>
            <h1>向下滚动查看淡入淡出效果</h1>
        </section>
        
        <section>
            <div class="fade-box"></div>
        </section>
        
        <section>
            <div class="fade-box"></div>
        </section>
        
        <section>
            <div class="fade-box"></div>
        </section>
        
        <section>
            <div class="fade-box"></div>
        </section>
        
        <section>
            <div class="fade-box"></div>
        </section>
    </div>
    
    <!-- 引入GSAP库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    
    <script>
        // 注册ScrollTrigger插件
        gsap.registerPlugin(ScrollTrigger);
        
        // 当DOM加载完成后执行
        document.addEventListener("DOMContentLoaded", function() {
            // 选择所有需要淡入淡出效果的元素
            const fadeElements = document.querySelectorAll(".fade-box");
            
            // 为每个元素创建动画
            fadeElements.forEach(element => {
                gsap.to(element, {
                    opacity: 1, // 淡入到不透明
                    duration: 0.8, // 动画持续时间
                    ease: "power2.out", // 缓动函数
                    scrollTrigger: {
                        trigger: element, // 触发元素
                        start: "top 80%", // 当元素顶部距离视口底部80%时触发淡入
                        end: "bottom 20%", // 当元素底部距离视口顶部20%时触发淡出
                        toggleActions: "play none reverse none" // 进入时播放，离开时反向播放
                        // 也可以使用 onEnter和onLeave回调实现更复杂的效果
                    }
                });
            });
            
            // 另一种实现方式 - 使用时间轴和更精确的控制
            fadeElements.forEach(element => {
                let tl = gsap.timeline({
                    scrollTrigger: {
                        trigger: element,
                        start: "top 90%",
                        end: "top 10%",
                        scrub: true // 动画会跟随滚动位置
                        // markers: true // 调试时显示标记
                    }
                });
                
                tl.fromTo(element, 
                    { opacity: 0 }, // 开始状态
                    { opacity: 1, duration: 0.5 } // 进入视口时的动画
                ).to(element,
                    { opacity: 0, duration: 0.5 }, // 离开视口时的动画
                    ">0.5" // 延迟一点时间开始淡出
                );
            });
        });
    </script>
</body>
</html>